<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>物流详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../../css/common.css" /> -->
    <style>
        body {
            background: #f3f3f3;
            font-size: 16px;
        }
        .aui-nav{
            height: auto;
        }
        .aui-icon-left {
            padding-left: 10px;
        }

        header {
            width: 100%;
            background: #fff;
            position: relative;
            z-index: 9;
        }

        .win_title {
            text-align: center;
            width: 100%;
            line-height: 45px;
            height: 45px;
        }

        .aui-iconfont {
            position: absolute;
        }
        .contain{
            margin-top: 12px;
        }
        .logisticsTitle{
            padding: 15px;
            background: #fff;
        }
        .logisticsList li.active p{
            color: #32b16c;
        }

        .logisticsList{
            padding-left: 45px;
            padding-right: 15px;
        }
        .logisticsList li{
            position: relative;
            padding: 15px 0;
        }
        .logisticsList li em{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #9c9c9c;
            display: block;
            float: left;
            position: absolute;
            left: -25px;
            top: 20px;

        }
        .logisticsList li:first-of-type em:before,.logisticsList li:last-of-type em:after{
            width: 0;
        }
        .logisticsList li em:before{
            content: "";
            width: 2px;
            background: #9c9c9c;
            position: absolute;
            top: -500%;
            bottom: 0;
            left: 4px;
        }
        .logisticsList li em:after{
            content: "";
            width: 2px;
            background: #9c9c9c;
            position: absolute;
            bottom: -500%;
            top: 0;
            left: 4px;
        }
        li.active span{
            color: #4f6ea6;
        }
        .logisticsList li.active em:before,
        .logisticsList li.active em:after,
        .logisticsList li.active em{
            background: #32b16c;
        }
        .aui-list-view-cell{
            overflow: inherit;
        }
    </style>
</head>

<body>
<div class="contain">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell" >
            <p>支付方式：在线支付</p>
            <p>配送公司：集运通</p>
            <p>订货单号：201610202145874445123655412</p>
        </li>
    </ul>
    <div class="logisticsTitle">物流详情</div>
    <ul class="aui-list-view logisticsList">
        <li class="aui-list-view-cell  active" >
            <em></em>
            <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
            <p>2016-10-21  11:43:50</p>
        </li>
        <li class="aui-list-view-cell active" >
            <em></em>
            <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
            <p>2016-10-21  11:43:50</p>
        </li>
        <li class="aui-list-view-cell" >
            <em></em>
            <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
            <p>2016-10-21  11:43:50</p>
        </li>
        <li class="aui-list-view-cell" >
            <em></em>
            <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
            <p>2016-10-21  11:43:50</p>
        </li>
        <li class="aui-list-view-cell" >
            <em></em>
            <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
            <p>2016-10-21  11:43:50</p>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<!-- <script type="text/javascript" src="../../script/doT.min.js"></script> -->
<!-- <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script> -->
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var header = $api.dom('header');
        $api.fixIos7Bar(header);

        
    }

</script>

</html>
